<template>
    <div id="OrderDetail">
        <van-nav-bar
                title="订单详情"
                left-arrow
                :fixed=true
                :border=true
                @click-left="$router.go(-1)"
        ></van-nav-bar>

        <van-tabs
                v-model="activeName"
                style="margin-top: 2.6rem"
                title-active-color="#75a342"
                color="#75a342"
                @click="dealWithTabClick"
        >
            <van-tab title="全部" name="a">
                <OrderItem v-for="(order,index) in allOrderArr" :order="order" :key="order._id"></OrderItem>
            </van-tab>
            <van-tab title="待支付" name="b">
                <OrderItem v-for="(order,index) in allWillOrderArr" :order="order" :key="order._id"></OrderItem>
            </van-tab>
            <van-tab title="待收货" name="c">
                <OrderItem v-for="(order,index) in allPayOrderArr" :order="order" :key="order._id"></OrderItem>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import OrderItem from './components/OrderItem'
    import {getOrder} from './../../../service/api/index'
    import {mapState} from 'vuex'
    import {Toast} from 'vant'
    export default {
        name: "MyOrder",
        components:{
            OrderItem
        },
        computed:{
            ...mapState(['userInfo'])
        },
        data(){
            return {
                activeName:'a',
                allOrderArr:null,
                allWillOrderArr:null,
                allPayOrderArr:null
            }
        },
        mounted() {
            //获取订单数据
            this.initOrder()
        },
        methods:{
            async initOrder(){
                let result = await getOrder(this.userInfo.token)
                if(result.success_code === 200) {
                    this.allOrderArr = result.data;
                } else {
                    Toast({
                        message:'订单获取失败',
                        duration:600
                    })
                }
            },
            async dealWithTabClick(name,title){
                if(name === 'a') {
                    this.allOrderArr = await this.getTabOrder()
                } else if(name === 'b') {
                    this.allWillOrderArr = await this.getTabOrder('will')
                } else if(name === 'c') {
                    this.allPayOrderArr = await this.getTabOrder('pay')
                }
            },
            async getTabOrder(status){
                let result = await getOrder(this.userInfo.token,status)
                if(result.success_code === 200) {
                     return result.data;
                } else {
                    Toast({
                        message:'订单获取失败',
                        duration:600
                    })
                }
            }
        }
    }
</script>

<style scoped>
#OrderDetail{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #F5F5F5;
    z-index: 200;
}
</style>